<template>
    <div class="topmenu">
        <div class="left">
            <router-link class="link" v-if="Vif_isLogin">你好，{{ t_username }}</router-link>
            <router-link style="color: #f22e00;" v-else >亲，请登录</router-link>
            <router-link class="link" to="/userinfoget/register">注册账户</router-link>
            <router-link class="link" to="/userinfoget/applyshop">立即开店</router-link>
        </div>
        <div class="right">
            <router-link class="link">收藏夹</router-link>
            <router-link class="link">购物车</router-link>
            <el-dropdown>
                <span class="el-dropdown-link">
                    帮助中心  
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </span>
                <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item>Action 1</el-dropdown-item>
                    <el-dropdown-item>Action 2</el-dropdown-item>
                    <el-dropdown-item>Action 3</el-dropdown-item>
                    <el-dropdown-item disabled>Action 4</el-dropdown-item>
                    <el-dropdown-item divided>Action 5</el-dropdown-item>
                </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
    
</template>

<script setup>
    import {onMounted, ref} from 'vue'
    const Vif_isLogin = ref(true);
    const t_username = ref('')
    onMounted(()=>{
        const user_info=JSON.parse(localStorage.getItem('user_info'))
        if(user_info){
            Vif_isLogin.value=true;
            t_username.value=user_info.userName;
        }
    })
</script>

<style scoped>
    a:-webkit-any-link{
        text-decoration: none;
        padding: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .router-link-active{
        color:black;
    }
    .link{
        color: black;
    }
    .link:hover{
        color:#f22e00;
    }
    body{
        padding: 0;
        margin: 0;
    }
    .topmenu{
        background-color: #f5f5f5;
        width: 100vw;
        height: 60px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between; 
    }
    .left{
        flex:1 0 auto;
        display: flex;
        flex-flow: row nowrap;
        gap:10px
    }
    .right{
        flex:1 0 auto;
        display: flex;
        flex-flow: row-reverse nowrap;
        align-items: center;
        gap:10px;
    }
    .el-dropdown-link{
        color:black;
        height: 30px;
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
    }
    .el-dropdown:hover{
        cursor: pointer;
    }
    
    
</style>